<template>
    <rx-layout>
        <div slot="left" width="220" showButton="true" class="rx-vue-tree-box">
            <rx-vue-tree
                :tree-data="treeData"
                :async-tree="true"
                :field="'id'"
                :label="'name'"
                :show-edit="true"
                @expandClick="triggerClick"
                :expandedKeys.sync="expandedKeys"
                @rowClick="handSelect"
                :tree-icon="treeIcon"
                :show-checkbox="false"
                :show-icon="true"
                :iconStyle="{fontSize:'13px',backgroundColor:'transparent',color:'#333'}"
            >
                <div slot="edit" slot-scope="{tree,data}">
                    <div class="btn" @click="addChild(tree)">
                        {{i18n('list.addSub','新增子级')}}
                    </div>
                    <div class="btn" v-if="!isRootNode(tree)" @click="addPopular(tree)">
                        {{i18n('list.addPopular','添加为热门城市')}}
                    </div>
                    <div class="btn" v-if="!isRootNode(tree)" @click="addSibling(data)">
                        {{i18n('list.addSibling','添加同级')}}
                    </div>
                    <div class="btn del" v-if="!isRootNode(tree)" @click="deleteNode(tree,data)">
                        {{$ti18('rxList.delBtn','删除')}}
                    </div>
                </div>
            </rx-vue-tree>
        </div>
        <div slot="center" style >
            <component ref="current" :is="currentView" v-if="showFormEdit" :key="key" :data="formData" @action="handAction"></component>
        </div>
    </rx-layout>
</template>

<script>


    import {RxVueTree} from "@lowcode/jpaas-common-lib"
    import FormCityEdit from "@/views/modules/form/core/FormCityEdit";
    import FormCityApi from "@/api/form/core/formCity";
    import CityTree from '@/components/redxun/mixin/cityTree'
    import FormPopularCityApi from "@/api/form/core/formPopularCity";
    import {Util} from "@lowcode/jpaas-common-lib";

    export default {
        name: 'FormCityList',
        mixins: [CityTree],
        components: {
            RxVueTree,
            FormCityEdit
        },
        data() {
            return {
                //操作动作
                action:"",
                //传递到表单的数据
                formData:{},
                //当前选中的数据
                currentNode:{},
                //当前父节点的数据
                parentData:{},

                currentView:"",
                //显示表单
                showFormEdit:false,
                treeIcon:{
                    expand:'folder-open',
                    collapse:'folder',
                    leaf:'file'
                },
                //随机ID
                key:Util.randomId(),
            }
        },

        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "formCity", key);
            },
            isRootNode(node){
                return node.id == '0';
            },
            /**
             * 处理编辑结果
             */
            handAction(resData){
                switch (resData.action) {
                    case "ok" :
                        this.showFormEdit = false;
                        this.afterSave(resData.data);
                        break;
                    case "cancel":
                        this.showFormEdit = false;
                        break;
                }
            },
            handSelect(tree,parentData) {
                //顶级节点不可编辑
                if(tree.parentId == "-1"){
                    return;
                }
                this.currentNode=tree;
                this.editNode(tree,parentData);
            },
            /**
             *添加子节点
             */
            addChild(tree) {
                let data = {
                    parentId:tree.id,
                    parentName:tree.name,
                    category : '1'
                }
                this.action="addChild";
                this.handClick(data,  tree);
            },
            /**
             * 添加热门城市。
             */
            addPopular(tree){
                this.$confirm({
                    title: this.$ti18('rxMsa.actionTips', '操作提示'),
                    content: this.i18n('msg.addTips',"您确定要添加其为热门城市吗"),
                    okText: this.$ti18('rxForm.ackBtn', '确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                    onOk() {
                        FormPopularCityApi.save(tree).then(res => {
                            return res;
                        })
                    }
                })
            },
            /**
             * 添加同级节点
             * @param parenData
             */
            addSibling(parenData) {
                let obj = {
                    parentName: parenData.name,
                    parentId: parenData.id,
                    category: "1"
               }
               this.action="addSibling";
               this.handClick(obj,  parenData)
            },
            /**
             * 编辑节点
             * @param selectNode
             */
            editNode(selectNode) {
                this.action="edit";
                this.handClick(selectNode);
            },
            /**
             * 删除城市
             * @param tree
             * @param parentData
             */
            deleteNode(tree,parentData) {
                let self_=this;
                var {id} = tree;
                this.$confirm({
                    title: this.$ti18('rxMsa.actionTips','操作提示'),
                    content: this.$ti18('rxMsa.delInfo','您确定需要删除选中的记录吗？'),
                    okText: this.$ti18('rxForm.ackBtn','确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                    onOk() {
                        FormCityApi.delById({id: id}).then(res => {
                            if (res.success) {
                                let index =  parentData.children.findIndex(obj=>obj.id == tree.id);
                                parentData.children.splice(index,1);
                                self_.showFormEdit = true;
                            }
                        })
                    }

                })
            },
            handClick(selectNode, parentData) {
                this.formData=selectNode;
                this.showFormEdit = true;
                //通过改变值变更组件
                this.key = Util.randomId();
                this.currentView = FormCityEdit;
                this.parentData = parentData;
            },
            //保存后回显
            afterSave(row){
                let parentData = this.parentData;
                switch (this.action) {
                    case "edit":
                        Object.assign(this.currentNode,row) ;
                        break;
                    case "addChild":
                        //有子节点
                        if(parentData.children){
                            parentData.children.push(row)
                        }
                        else{
                            parentData.children=[row];
                        }
                        break;
                    case "addSibling":
                        parentData.children.push(row);
                        break;
                }
            }
        }
    }
</script>
<style scoped>

</style>

